<template>
  <transition name="fade">
    <div class="all-lotterys" v-show="show">
      <div class="contents">
        <span
          class="content button-unselected hover-style"
          v-for="(item, index) in listData" 
          :key="item.id"
          :class="activeIndex == index ? 'active' : ''"
          @click="updateActiveIndex(index)"
          >
          <span>{{item.name}}</span>
        </span>
      </div>
    </div>
  </transition>
</template>

<script>
import DropdownPicker from '@/components/base/dropdown-picker/dropdown-picker'
export default {
  components: {
    DropdownPicker
  },
  props: {
    listData: {
      type: Array, 
      default: function() {
        return [
        {
          id: 0,
          name: '全部彩票',
          // path: '/select-number/shishicai'
        },
        {
          id: 1,
          name: '重庆时时彩',
          path: '/select-number/shishicai'
        },
        {
          id: 2,
          name: '极速飞艇',
          path: '/select-number/jsfeiting'
        },{
          id: 3,
          name: '江苏快三',
          path: '/select-number/jskuaisan'
        },{
          id: 4,
          name: '北京赛车',
          path: '/select-number/bjracer'
        },{
          id: 5,
          name: '江西快三',
          path: '/select-number/jxkuaisan'
        },{
          id: 6,
          name: '幸运快三',
          path: '/select-number/xykuaisan'
        },{
          id: 7,
          name: '极速快三',
          path: '/select-number/jskuaisan'
        },{
          id: 8,
          name: '十分六合彩',
          path: '/select-number/sfliuhecai'
        },{
          id: 9,
          name: '北京28',
          path: '/select-number/bj28'
        },{
          id: 10,
          name: '排列三',
          path: '/select-number/pailiesan'
        },{
          id: 11,
          name: '福彩3D',
          path: '/select-number/fc3D'
        },{
          id: 12,
          name: '极速时时彩',
          path: '/select-number/jsshishicai'
        },{
          id: 13,
          name: '广东11选5',
          path: '/select-number/gd11xuan5'
        },{
          id: 14,
          name: '香港六合彩',
          path: '/select-number/hkliuhecai'
        },{
          id: 15,
          name: '安徽快三',
          path: '/select-number/ahkuaisan'
        },{
          id: 16,
          name: '新疆时时彩',
          path: '/select-number/xjshishicai'
        },{
          id: 17,
          name: '极速赛车',
          path: '/select-number/jssaiche'
        },{
          id: 18,
          name: '幸运飞艇',
          path: '/select-number/xyfeiting'
        },{
          id: 19,
          name: '上海快三',
          path: '/select-number/shkuaisan'
        },{
          id: 20,
          name: '湖北快三',
        },{
          id: 21,
          name: '天津时时彩',
        },{
          id: 22,
          name: '河北快三',
          
        },{
          id: 23,
          name: '甘肃快三',
          path: '/select-number/gskuaisan'
        },{
          id: 24,
          name: '广西快三',
          path: '/select-number/gxkuaisan'
        },{
          id: 25,
          name: '山东11选5',
          path: '/select-number/sd11xuan5'
        },{
          id: 26,
          name: '腾讯分分彩',
          path: '/select-number/txfenfencai'
        },{
          id: 27,
          name: '福建快三',
          path: '/select-number/fjkuaisan'
        },{
          id: 28,
          name: '贵州快三',
          path: '/select-number/gzkuaisan'
        },{
          id: 29,
          name: '河内时时彩',
          path: '/select-number/hnshishicai'
        },{
          id: 30,
          name: '老北京赛车',
          path: '/select-number/lbjracer'
        },
      ]
      }
    },
    show: {
      type: Boolean,
      default: false
    },
    // activeIndex: {
    //   type: Number,
    //   default: 0
    // }
  },
  data() {
    return {
      activeIndex: 0
    }
  },
  methods: {
    updateActiveIndex(index) {
      this.activeIndex = index
      this.$emit('click', index)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
    .all-lotterys 
      width 666px
      height 258px
      background #fff
      box-sizing border-box 
      padding 10px
      border 1px solid rgba(219, 211, 211, 1)
      box-shadow 0px 3px 5px 0px rgba(0, 0, 0, 0.1)
      border-radius 0px 0px 3px 3px
      &.fade-enter, &.fade-leave-to 
        opacity 0
      &.fade-enter-active, &.fade-leave-active 
        transition opacity 0.3s
      .contents 
        display flex 
        flex-wrap wrap 
        align-items center
        width 100%
        height 100% 
        box-sizing border-box 
        .content 
          box-sizing border-box 
          width 96px 
          height 32px
          line-height 32px
          margin-left 10px
          text-align center
          font-weight 400 
          color $color-theme-dark
          &.active 
            color #fff !important 
            background $color-theme-red
            border 1px solid $color-theme-red
</style>